<template>
    <view class="page">
        <WaterfallsFlow :wfList='list' @itemTap="itemTap" />
    </view>
</template>

<script>
    import WaterfallsFlow from '../../components/WaterfallsFlow/WaterfallsFlow.vue'

    export default {
        components:{
            WaterfallsFlow
        },
        data() {
            return {
                list:[
				{
						image:"../../static/OIP-C.jpg",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/1.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/OIP-C.jpg",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/1.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/2.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				},{
						image:"../../static/1.jfif",
						area:"清扫学菀路",
						date:"2021.12.3-2021.12.4",
						number:"20",
						status:"未开始"
				}
				],
                requiredData:[
					{
							image:"../../static/OIP-C.jpg",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/1.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/OIP-C.jpg",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/1.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/2.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					},{
							image:"../../static/1.jfif",
							area:"清扫学菀路",
							date:"2021.12.3-2021.12.4",
							number:"20",
							status:"未开始"
					}
				]   // 存放模拟加载的数据
            }
        },
        onLoad() {
            // 模拟请求数据
            setTimeout(()=>{
                this.list = this.requiredData;
            },500)
        },
        onReachBottom(){
            // 模拟触底刷新
            setTimeout(()=>{
                this.requiredData.push(...this.list);
            },500)
        },
        onPullDownRefresh(){
            // 模拟上拉刷新
            setTimeout(()=>{
                const newList = this.requiredData.reverse();
                this.list = newList;
                uni.stopPullDownRefresh();
            },500)
        },
        methods:{
            itemTap(item){
               uni.navigateTo({
               	url:"./voluntaryDetail"
               })
            }
        }

    }
</script>

<style lang="scss" scoped>
    .page{
        min-height: 100vh;
        background: #ffffff;
    }
</style>